<template>
  <button
    :class="[buttonClasses, buttonSizeClasses]"
    class="shadow-sm transition-colors duration-200 flex items-center justify-center"
    :disabled="disabled || loading"
  >
    <div :class="[iconSizeClasses]" class="flex items-center justify-center mr-1">
      <Icon v-if="loading" icon="svg-spinners:6-dots-scale"></Icon>
      <slot name="icon" v-else></slot>
    </div>
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'Button'
  })
  import { computed } from 'vue'

  type ButtonColor = 'blue' | 'green' | 'purple' | 'red'
  type ButtonSize = 'small' | 'large' | 'medium'
  interface ButtonProps {
    color?: ButtonColor
    size?: ButtonSize
    disabled?: boolean
    plain?: boolean
    loading?: boolean
  }
  const props = withDefaults(defineProps<ButtonProps>(), {
    color: 'blue',
    disabled: false,
    plain: false,
    loading: false,
    size: 'medium'
  })
  const classes: Record<ButtonColor, any> = {
    blue: {
      plain:
        'border border-blue-500 bg-white text-blue-500 hover:bg-blue-50 active:bg-blue-100 disabled:border-blue-300 disabled:text-blue-300 disabled:bg-white disabled:cursor-not-allowed',
      normal:
        'bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed'
    },
    green: {
      plain:
        'border border-green-500 bg-white text-green-500 hover:bg-green-50 active:bg-green-100 disabled:border-green-300 disabled:text-green-300 disabled:bg-white disabled:cursor-not-allowed',
      normal:
        'bg-green-500 text-white hover:bg-green-600 active:bg-green-700 disabled:bg-green-300 disabled:cursor-not-allowed'
    },
    purple: {
      plain:
        'border border-purple-500 bg-white text-purple-500 hover:bg-purple-50 active:bg-purple-100 disabled:border-purple-300 disabled:text-purple-300 disabled:bg-white disabled:cursor-not-allowed',
      normal:
        'bg-purple-500 text-white hover:bg-purple-600 active:bg-purple-700 disabled:bg-purple-300 disabled:cursor-not-allowed'
    },
    red: {
      plain:
        'border border-red-500 bg-white text-red-500 hover:bg-red-50 active:bg-red-100 disabled:border-red-300 disabled:text-red-300 disabled:bg-white disabled:cursor-not-allowed',
      normal:
        'bg-red-500 text-white hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 disabled:cursor-not-allowed'
    }
  }
  const sizeClasses: Record<ButtonSize, any> = {
    small: 'h-[24px] text-xs rounded-[3px] px-[8px] min-w-[60px]',
    medium: 'h-[32px] text-sm rounded-[4px] px-[12px] min-w-[80px]',
    large: 'h-[40px] text-base rounded-[4px] px-[16px] min-w-[100px]'
  }
  const buttonClasses = computed(() => {
    return props.plain ? classes[props.color].plain : classes[props.color].normal
  })
  const buttonSizeClasses = computed(() => {
    return sizeClasses[props.size]
  })
  const iconSizeClasses = computed(() => {
    const sizeMap = {
      small: 'w-4 h-4',
      medium: 'w-5 h-5',
      large: 'w-6 h-6'
    }
    return sizeMap[props.size]
  })
</script>

<style scoped></style>
